
<script type="text/javascript">
    $(document).ready(function(){
        var height = $('.category_slide_content').height();
        if(height > 300){
            $('#bt_show_more_category').css('display','block');
        }
        $('#bt_show_more_category').click(function(){
            if($('.category_slide').css('overflow') == 'hidden'){
                $('.category_slide').css('overflow','visible');
                var height = $('.category_slide_content').height() - 18;
                $(this).css('top',height + 'px');
            }
            else{
                $('.category_slide').css('overflow','hidden');
                $(this).css('top','280px');
            }
        });
    });
</script>

<div class="category_slide">
    <div class="category_slide_content">
        <ul>
            <?php
                if($template->get('aCategories'))
                {
                    foreach($template->get('aCategories') as $aCategory)
                    {
                        echo '<li><a style="display:inline;position:static;line-height:0px;" href="'.$aCategory['uri'].'"><img src="'.(isset($aCategory['image']) ? URL::getLink('upload/'.$aCategory['image']) : URL::getLink('image/icon-laptop')).'"></a>
                                    <a href="'.$aCategory['uri'].'">'.$aCategory['name'].'</a></li>';
                    }
                }
            ?>
        </ul>
        <div style="clear: both;"></div>
    </div>
    <input type="button" id="bt_show_more_category">
</div>